---
title: Override styles
description: HeroUI allows you to override the default styles of the components in several ways.
---

# Override styles

Overriding default component styles is as simple as passing your own class names to the `className`
or to the `classNames` prop for components with slots.

<CarbonAd/>

### What is a Slot?

A slot is a part of a component that can be styled separately using the `classNames` prop. For example, the [CircularProgress](/docs/components/circular-progress) component has slots like `track`, `indicator`, and `value` that can each be styled independently.

### Overriding a component

Let's override the default styles of the [Button](/docs/components/button) component, which is a component that has no slots.

```jsx {7}
import {Button} from "@heroui/react";

export default function App() {
  return (
    <Button
      disableRipple
      className="relative overflow-visible rounded-full hover:-translate-y-1 px-12 shadow-sm bg-background/30 after:content-[''] after:absolute after:rounded-full after:inset-0 after:bg-background/40 after:z-[-1] after:transition after:duration-500! hover:after:scale-150 hover:after:opacity-0"
      size="lg"
    >
      Press me
    </Button>
  );
}
```

<Spacer y={4}/>

import buttonOverrideExample from "@/content/customization/override-styles/button-example";

<CodeDemo
  isCentered
  title="Override Button styles"
  files={buttonOverrideExample}
  showEditor={false}
  isPreviewCentered={true}
  gradientColor="orange"
  isGradientBox={true}
  previewHeight={160}
  className="py-5"
/>

### Components with slots

Some HeroUI components have slots that can be styled individually using the `classNames` prop. The [CircularProgress](/docs/components/circular-progress) component has the following slots:

- **base**: The base slot of the circular progress, it is the main container.
- **svgWrapper**: The wrapper of the svg circles and the value label.
- **svg**: The svg element of the circles.
- **track**: The track is the background circle of the circular progress.
- **indicator**: The indicator is the one that is filled according to the `value`.
- **value**: The value content.
- **label**: The label content.

The example below demonstrates styling these slots to create a custom circular progress:

import slotsOverrideExample from "@/content/customization/override-styles/slots-example";

```jsx {9-12}
import {CircularProgress, Card, CardBody} from "@heroui/react";

export default function App() {
  return (
    <Card className="w-[240px] h-[240px] bg-linear-to-br from-violet-500 to-fuchsia-500">
      <CardBody className="justify-center items-center py-0">
        <CircularProgress
          classNames={{
            svg: "w-36 h-36 drop-shadow-md",
            indicator: "stroke-white",
            track: "stroke-white/10",
            value: "text-3xl font-semibold text-white",
          }}
          value={70}
          strokeWidth={4}
          showValueLabel={true}
        />
      </CardBody>
    </Card>
  );
}
```

<Spacer y={4}/>

<CodeDemo
  title="Override CircularProgress styles"
  files={slotsOverrideExample}
  showEditor={false}
/>

> **Note**: You will find a `Slots` section in the documentation of each component that has slots.


### CSS Modules

CSS Modules allow for the creation of local scope classes and variables. Here's how 
you can use it to override styles:

```jsx
import {CircularProgress, Card, CardBody} from "@heroui/react";
import styles from './App.module.css';

export default function App() {
  return (
    <Card className={styles.card}>
      <CardBody className={styles.cardBody}>
        <CircularProgress
          classNames={{
            svg: styles.svg,
            indicator: styles.indicator,
            track: styles.track,
            value: styles.value,
          }}
          value={70}
          strokeWidth={4}
          showValueLabel={true}
        />
      </CardBody>
    </Card>
  );
}
```

With the corresponding CSS module:

```css
/* App.module.css */
.card {
  width: 240px;
  height: 240px;
  background: linear-gradient(to bottom right, violet, fuchsia);
}

.cardBody {
  justify-content: center;
  align-items: center;
  padding-bottom: 0;
}

.svg {
  width: 36px;
  height: 36px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}

.indicator {
  stroke: white;
}

.track {
  stroke: rgba(255, 255, 255, 0.1);
}

.value {
  font-size: 24px;
  font-weight: 600;
  color: white;
}
```

### CSS-in-JS

If you are using a CSS-in-JS library such as [styled-components](https://styled-components.com/) or [emotion](https://emotion.sh/), you can use the following
example to override the styles of a component:


```jsx
import {CircularProgress, Card, CardBody} from "@heroui/react";
import styled from 'styled-components';

const StyledCard = styled(Card)`
  width: 240px;
  height: 240px;
  background: linear-gradient(to bottom right, violet, fuchsia);
`;

const StyledCardBody = styled(CardBody)`
  justify-content: center;
  align-items: center;
  padding-bottom: 0;
`;

const StyledCircularProgress = styled(CircularProgress).attrs({
  classNames: {
    svg: 'w-36 h-36 drop-shadow-md',
    indicator: 'stroke-white',
    track: 'stroke-white/10',
    value: 'text-3xl font-semibold text-white',
  }
})``;

export default function App() {
  return (
    <StyledCard>
      <StyledCardBody>
        <StyledCircularProgress
          value={70}
          strokeWidth={4}
          showValueLabel={true}
        />
      </StyledCardBody>
    </StyledCard>
  );
}
```

Each styled component combines the original component styles with custom styles defined in the template strings. The `StyledCircularProgress` uses `.attrs` to add classNames.
